<!DOCTYPE html>
<html>
    <head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<script src="js/authentication.js" type="text/javascript"></script>

	<link rel="stylesheet" type="text/css" href="css/authentication.css" />
    </head>
    <body  onLoad="initRegistration();">
	<div class="registrationContainer">
	    <h1>Register</h1>
	    <h4>To access the app, fill in the form below. All fields are required.</h4>
	    <form name="registration">
		<div class="registrationComponent">

		    <!-- ***************** USERNAME BLOCK ****************** -->

		    <div id="usernameBlock" class="fieldBlock">
			<div class="labelStyle">Email:</div>
			<div class="fieldStyle">
			    <input type="text" tabindex="1" name="username" id="usernameField"
				   onblur="blurUsername();" onfocus="focusUsername()"/>
			    <img id="usernameValidIcon" style="display:none;" src="../img/valid_16x16.png"/>
			    <div id="usernameRequiredError" style="display:none;" class="invalidFieldError">
				<img src="../img/error_16x16.png"/>
				<span>
				    This field is required.
				</span>
			    </div>&nbsp;
			</div>
			<span class="info" id="usernameHint" style="display:none;">
			    <img src="../img/info_16x16.png" />&nbsp;
			    Your email will be used as your username.
			</span>

		    </div>

		    <!-- ***************** USERNAME ERROR ****************** -->

		    <div id="usernameInvalidError" style="display:none;" class="invalidFieldError">
			<img src="../img/error_16x16.png"/>
			<span>
			    The username you entered isn't in a valid format. It's your email, 
			    so it should look like example@example.com.
			</span>
		    </div>


		    <!-- ***************** PASSWORD 1 BLOCK ****************** -->

		    <div id="password1Block" class="fieldBlock">
			<div class="labelStyle">Password:</div>
			<div class="fieldStyle">
			    <input type="password" tabindex="2" name="password1" id="password1Field"
				   onblur="blurPassword1();" onfocus="focusPassword1()" />
			    <img id="password1ValidIcon" style="display:none;" src="../img/valid_16x16.png"/>
			    <div id="password1RequiredError" style="display:none;" class="invalidFieldError">
				<img src="../img/error_16x16.png"/>
				<span>
				    This field is required.
				</span>
			    </div>&nbsp;
			</div>
			<span class="info" id="password1Hint" style="display:none;">
			    <img src="../img/info_16x16.png" />&nbsp;
			    Your password should 
			    <ul>
				<li>be at least <b>eight characters</b> long</li>
				<li>have at least <b>one lowercase</b> character</li>
				<li>have at least <b>one uppercase</b> character</li>
				<li>have at least <b>one special</b> character</li>
			    </ul>
			</span>
		    </div>

		    <!-- ***************** PASSWORD 1 ERROR ****************** -->

		    <div id="password1InvalidError" style="display:none;" class="invalidFieldError">
			<img src="../img/error_16x16.png"/>
			<span>
			    The format of your password is invalid
			</span>
		    </div>



		    <!-- ***************** PASSWORD 2 BLOCK ****************** -->

		    <div id="password2Block" class="fieldBlock">
			<div class="labelStyle">Retype Password:</div>
			<div class="fieldStyle">
			    <input type="password" tabindex="3" name="password2" id="password2Field"
				   onblur="blurPassword2()" onfocus="focusPassword2()" />
			    <img id="password2ValidIcon" style="display:none;" src="../img/valid_16x16.png"/>
			    <div id="password2RequiredError" style="display:none;" class="invalidFieldError">
				<img src="../img/error_16x16.png"/>
				<span>
				    This field is required.
				</span>
			    </div>&nbsp;
			</div>
			<span class="info" id="password2Hint" style="display:none;">
			    <img src="../img/info_16x16.png" />&nbsp;
			    Retype the same password you entered above.
			</span>
		    </div>

		    <!-- ***************** PASSWORD 2 ERROR ****************** -->

		    <div id="password2InvalidError" style="display:none;" class="invalidFieldError">
			<img src="../img/error_16x16.png"/>
			<span>
			    The two passwords you entered don't match.
			</span>
		    </div>


		</div>

		<div id="displayNameBlock" class="fieldBlock">
		    <div class="labelStyle">Display Name:</div>
		    <div class="fieldStyle">
			<input type="text" tabindex="4" name="displayName" id="displayNameField"
			       onblur="blurDisplayName();" onfocus="focusDisplayName()" />
			<img id="displayNameValidIcon" style="display:none;" src="../img/valid_16x16.png"/>
			<div id="displayNameRequiredError" style="display:none;" class="invalidFieldError">
			    <img src="../img/error_16x16.png"/>
			    <span>
				This field is required.
			    </span>
			</div>&nbsp;
		    </div>
		    <span class="info" id="displayNameHint" style="display:none;">
			<img src="../img/info_16x16.png" />&nbsp;
			Your display name will be used throughout the app whenever we need to 
			display your name to others, such as when showing that a task is assigned to you.
		    </span>

		</div>



		<!-- ***************** FORM BUTTONS ****************** -->

		<div class="formButtons">
		    <div class="formButton">
			<button tabindex="5" id="btnRegister"><img src="../img/ok_24x24.png"/> Register</button>
		    </div>

		    <div class="formButton">
			<button tabindex="6" onclick="document.forms[0].reset()" id="btnClear"><img src="../img/clear_24x24.png"/> Clear</button>
		    </div>

		    <div class="formButton">
			<button tabindex="7" id="btnCancel"><img src="../img/cancel_24x24.png"/> Cancel</button>
		    </div>
		</div>
	    </form>
	</div>
    </body>
</html>
